<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>提交订单</title>
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mui.css?v=1">
		<link rel="stylesheet" type="text/css" href="__API__/lib/css/mobileSelect.css" />
		<link rel="stylesheet" href="__API__/lib/css/style.css">
		<script type="text/javascript" src="__API__/lib/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/mui.js"></script>
		<script src="__API__/lib/js/mobileSelect.js" type="text/javascript" charset="utf-8"></script>
		<script src="__API__/lib/js/city.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="__API__/lib/js/swiper.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/vue.min.js"></script>
		<script type="text/javascript" src="__API__/lib/js/common.js"></script>
		<script type="text/javascript" src="__API__/lib/js/index.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script></head>

	<body>
		<div class="order_info bg_color" id="app">
			<div class="confirmorders">
				<div class="addaddress">
					<div class="icon"><img src="__API__/lib/images/address.png" alt=""></div>
					<div v-if="!address || address == ''" class="jump xzaddress" @click="goDetail('add_address.html')">+
						添加地址</div>
					<div v-else @click="openAddress()">
						<p><span>收件人：{{address.name}} </span><span>{{address.mobile}}</span></p>
						<p>地址：{{address.prov}}{{address.city}}{{address.area}}{{address.address}}</p>
					</div>
				</div>
				<div class="confirmorders_info">
					<h2>商品清单</h2>
					<ul class="search_list">
						<li v-for="(item,i) in orderList" :key="i">
							<div class="img"><img :src="item.single_pic" alt=""></div>
							<div class="info">
								<div class="left">
									<h3>{{item.title}}</h3>
									<span>{{item.type_title}}</span>
									<div class="info_bot">
										<p class="price">￥{{item.price}}</p><span class="num">x{{item.number}}</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="confirmorders_con">
<!--					<div class="confirmorders_bot">-->
<!--						<span>运费</span>-->
<!--						<p class="redprice">￥{{freight}}</p>-->
<!--					</div>-->
					<div class="confirmorders_bot text_box">
						<textarea v-model="reason" placeholder="请输入备注"></textarea>
					</div>
				</div>
			</div>
			<div class="footercart">
				<div class="footercart_left confirmfoot_left">
					<p>总价格：<span class="red_color">￥{{totalPrice}}</span></p>
					<p>共有<span class="red_color">{{totalNum}}</span>件商品</p>
				</div>
				<div class="footercart_right confirmfoot_right">
					<div class="blue_bg foot_btn" @click="openPay()">支付</div>
				</div>

			</div>
			<!-- 选择地址弹窗 -->
			<div class="addcartmask address_mask" v-if="isAddress" @click="cancelMask()">
				<div class="address_mask_box" @click.stop>
					<div class="m_head">
						<h2>选择收货地址</h2>
						<span class="close" @click="cancelMask()"><img src="__API__/lib/images/close.png"></span>
					</div>
					<ul class="address_list">
						<li :class="{'active': addressIndex == i}" v-for="(item,i) in addressList" :key="i" @click="chooseAddress(i)">
							<div class="icon"><img src="__API__/lib/images/address.png" alt=""></div>
							<div class="right">
								<p><span>收件人：{{item.name}} </span><span>{{item.mobile}}</span></p>
								<p>地址：{{item.prov}}{{item.city}}{{item.area}}{{item.address}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- 支付弹窗 -->
			<div class="addcartmask pay_mask" v-if="isPay" @click="cancelMask()">
				<div class="pay_mask_box" @click.stop>
					<ul class="pay_list">
						<li>
							<div class="mui-input-row mui-radio ">
								<label><img src="__API__/lib/images/pay2.png" alt="">购物积分支付
									<span>￥{{integral_price}}</span></label>
								<input name="payRadio" type="radio" value="0" v-model="payCheck" />
							</div>
						</li>
						<li>
							<div class="mui-input-row mui-radio ">
								<label><img src="__API__/lib/images/pay1.png" alt="">微信支付</label>
								<input name="payRadio"  type="radio" value="1" v-model="payCheck" checked />
							</div>
						</li>
					</ul>
					<div class="form_submit">
						<div class="grey_bg" @click="cancelMask()">取消</div>
						<div class="blue_bg" @click="nowpay()">确定</div>
					</div>
				</div>
			</div>
		</div>
		<script>

			var token = localStorage.getItem('token');
			var pay_openid = localStorage.getItem('pay_openid');
			if(!token){
				window.location = "{:url('login')}";
			}
			if(!pay_openid){
				common.ajax("{:url('Wechat/code')}",{token:token} , function(res){
					window.location.href = res.data
				})
			}

			var app = null;
			app = new Vue({
				el: '#app',
				data: {
					address: {
						name: '',
						mobile: '',
						address: ''
					},
					orderList: [],
					freight: '18',
					totalPrice: '184',
					totalNum: '1',
					reason: '',
					integral_price: '0',

					isAddress: false,
					isPay: false,
					payCheck: 1,
					pay_param:{},
					
					// addressList: [
					//
					// ],
					addressIndex: -1
				},
				setup(){
					let addressList=ref(
								 [1,2,3]
					)

				},

				created: function() {
					common.removeCache('addressData');
					var that = this;
					var type = "{:input('type')}";

					common.ajax("{:url('Cart/index')}",{type:type,token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.orderList = res.data;
						that.totalPrice = res.total_price;
						that.totalNum = res.total_count;
						// that.getData(searchValue);
					})
					common.ajax("{:url('Address/index')}",{token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.addressList = res.data;
                       console.log(that.addressList)
						console.log(res.data)
						console.log(that)
						// that.getData(searchValue);
					})
					common.ajax("{:url('Address/my_index')}",{token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.address = res.data;

						// that.getData(searchValue);
					})
					common.ajax("{:url('Member/my')}",{token:localStorage.getItem('token')} , function(res) {
						//common.showToast(res.msg);
						that.integral_price = res.data.integral;

						// that.getData(searchValue);
					})
				},
				methods: {

					getData(value) {
						let that = this;
						let data = {
							searchValue: value
						}
						common.ajax('', data, function(res) {

						})
					},
					goDetail(url) {
						common.openUrl(url)
					},
					openAddress() {
						this.isAddress = true;
					},
					chooseAddress(i){
						this.addressIndex = i;
						this.address = this.addressList[i];
						this.cancelMask();
					},
					openPay() {
						let that=this
						var cart_id = "{:input('cart_id')}";
						var type ="{:input('type')}";

						if(!this.address){
							return common.alert('没有地址',' ')
						}
						if(!that.order_number){
							common.ajax("{:url('Order/create')}",{cart_id:cart_id,token:localStorage.getItem('token'),type:type,address_id:that.address.id,remark:that.reason} , function(res){
								common.showToast(res.msg);
								that.order_number =res.data.order_number

							})

						}
						that.isPay = true;

					},
					cancelMask() {
						this.isPay = false;
						this.isAddress = false;
					},
					nowpay() {
						var that = this;
						console.log(that.payCheck)
						var pay_openid = localStorage.getItem('pay_openid');
						if(!pay_openid){
							common.showToast('支付凭据未获取成功,请刷新页面试下');return;
						}
						if (that.payCheck == 1) {
							common.ajax("{:url('Wechat/order')}",{token:localStorage.getItem('token'),order_number:that.order_number,openid:pay_openid} , function(res) {
								common.showToast(res.msg);
								console.log(res.data)
								if(res.code == 200){
									WeixinJSBridge.invoke(
											'getBrandWCPayRequest', res.data,
											function(res){
												if(res.err_msg == "get_brand_wcpay_request:ok" ){
													common.openUrl('pay_success.html' );
													// 使用以上方式判断前端返回,微信团队郑重提示：
													//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
												}
											});
								}

								// that.getData(searchValue);
							})
							//微信
						} else {
							//积分
							common.ajax("{:url('Member/integral_pay')}",{token:localStorage.getItem('token'),order_number:that.order_number} , function(res) {
								common.showToast(res.msg);
								if(res.code == 200){
									common.openUrl('pay_success.html' );
								}

								// that.getData(searchValue);
							})
						}
						var data = {
							reason: that.reason
						}
						// 支付接口
						// common.ajax('', data, function(res) {
						// 	if (res.success) {
						// 		//支付成功
						// 		var id = '';
						// 		common.openUrl('pay_success.html?id=' + id);
						// 	} else {
						// 		common.alert(res.msg, ' ')
						// 	}
						// })


						that.cancelMask();
					}

				}
			});
		</script>

<!--		<script type="text/javascript">-->
<!--			//调用微信JS api 支付-->

<!--			function onBridgeReady(){-->
<!--				WeixinJSBridge.invoke(-->
<!--						'getBrandWCPayRequest', {-->
<!--							"appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入-->
<!--							"timeStamp":"1395712654",         //时间戳，自1970年以来的秒数-->
<!--							"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串-->
<!--							"package":"prepay_id=u802345jgfjsdfgsdg888",-->
<!--							"signType":"MD5",         //微信签名方式：-->
<!--							"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名-->
<!--						},-->
<!--						function(res){-->
<!--							if(res.err_msg == "get_brand_wcpay_request:ok" ){-->
<!--								// 使用以上方式判断前端返回,微信团队郑重提示：-->
<!--								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。-->
<!--							}-->
<!--						});-->
<!--			}-->
<!--			if (typeof WeixinJSBridge == "undefined"){-->
<!--				if( document.addEventListener ){-->
<!--					document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);-->
<!--				}else if (document.attachEvent){-->
<!--					document.attachEvent('WeixinJSBridgeReady', onBridgeReady);-->
<!--					document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);-->
<!--				}-->
<!--			}else{-->
<!--				onBridgeReady();-->
<!--			}-->
<!--		</script>-->
	</body>

</html>
